<template>
  <div class="discharge-stats-container">
    <!-- <div class="discharge-stats-title">{{ title }}</div> -->
    <bsc-subtitle :subtitle="title" class="subtitle" />
    <div class="chart-wrapper1">
      <div
        v-for="(item, index) in chartItems"
        :key="index"
        class="wrapper-item"
      >
        <DischargeChartRBt
          :icon-image="item.iconImage"
          :title="item.title"
          :value="item.value"
          :tons="item.tons"
          :unit="item.unit"
          :ring-color="item.ringColor"
          style="height: 100%; width: 100%"
        />
      </div>
    </div>
  </div>
</template>

<script>
import BscSubtitle from "./subtitle.vue";
import DischargeChartRBt from "./discharge-chart-r-bt.vue";

export default {
  name: "DischargeStats",
  components: {
    BscSubtitle,
    DischargeChartRBt,
  },
  props: {
    title: {
      type: String,
      required: true,
      default: "默认标题",
    },
    chartItems: {
      type: Array,
      default: () => [
        {
          iconImage: "card-lv.png",
          title: "最高卸船效率",
          value: 78,
          unit: "万吨",
          ringColor: "#4bf3f9",
        },
      ],
    },
  },
  data() {
    return {
      subtitle: "卸船统计",
    };
  },
};
</script>

<style scoped lang="scss">
.discharge-stats-container {
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  background: url("~@/assets/images/bsc_r2.png") left center / 100% 100%
    no-repeat;

  .discharge-stats-title {
    position: absolute;
    top: 5px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    text-shadow: rgb(0, 117, 255) 0px 0px 8px;
    padding: 0px;
  }
  .subtitle {
    top: 32px;
  }
  .chart {
    width: 90%;
    height: 90%;
  }
  .chart-wrapper1 {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    padding: 20px;
    .wrapper-item {
      width: 22% ;
      height: 100%;
    }
  }
}
</style>
